<template>
	<div class="">
		<naviHeader></naviHeader>
    
    <div>
      <div class="tab">
        <div class="item" v-bind:class="{'select-item': selectIndex === 0}" v-on:click="selectIndex = 0">全部</div>
        <div class="item" v-bind:class="{'select-item': selectIndex === 1}" v-on:click="selectIndex = 1">收入记录</div>
        <div class="item" v-bind:class="{'select-item': selectIndex === 2}" v-on:click="selectIndex = 2">支出记录</div>
      </div>

      <div class="contianer">
        <div class="item" v-for="item in list" :key="item.index">
          <div>
            <div>{{item.incomeType === 'WATCH_COURSE_ADD_SCORE' ? '观看视频' : ''}}</div>
            <div class="date">{{item.createTime}}</div>
          </div>

          <div class="score">+{{item.number}}</div>
        </div>
      </div>
    </div>
	</div>
</template>

<script>
import naviHeader from "src/components/naviHeader/naviHeader";
import {
  getscoreRecord,
  getIncomeRecord,
  getConsumerRecord
} from "../../service/getData";

export default {
  data() {
    return {
      list: [],
      allRecord: [
        {
          incomeType: "签到",
          createTime: "2019-01-03 15:44:49",
          number: 1234
        }
      ],
      incomeRecord: [],
      expendRecord: [],
      selectIndex: 0
    };
  },

  mounted() {
    this.init();
  },
  components: {
    naviHeader
  },

  watch: {
    selectIndex: function() {
      switch (this.selectIndex) {
        case 0:
          this.list = this.allRecord;
          break;
        case 1:
          this.list =  this.incomeRecord;
          break;
        case 2:
          this.list =  this.expendRecord;
          break;
      }
    }
  },
  methods: {
    init: function() {
      // 获取自己的所有积分记录
      getscoreRecord(this.$store.userToken).then(res => {
        this.allRecord = res.content;
        this.list = res.content;
      });

      // 获取自己收入的积分记录
      getIncomeRecord(this.$store.userToken).then(res => {
        this.incomeRecord = res.content;
      });

      // 获取自己消费的所有积分记录
      getConsumerRecord(this.$store.userToken).then(res => {
        this.expendRecord = res;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";

.tab {
  @include fj(space-around);
  background: #fff;
  border-bottom: 2px solid #f1f1f1;

  .item {
    width: 2rem;
    text-align: center;
    height: 1rem;
    line-height: 1rem;
  }

  .select-item {
    border-bottom: 2px solid #16e08f;
  }
}

.contianer{
  background: #fff;
  margin-top: 0.1rem;

  .item{
    @include fj(space-between);
    align-items: center;
    padding: 0 0.2rem;
    height: 1.8rem;
    line-height: 0.7rem;
    border-bottom: 2px solid #f1f1f1;

    .date{
      @include sc(0.28rem, #999);
    }
  }
  
}
</style>
